<template>
  <div>
    <div class="aui-content">
      <ul class="aui-list aui-form-list">
        <li class="aui-list-item">
          <div class="aui-list-item-inner">
            <div class="aui-list-item-input">
            <input placeholder="标题" v-model="slug.title" />
          </div>
          </div>
        </li>
        <li class="aui-list-item">
          <div class="aui-list-item-inner">
            <div class="aui-list-item-input">
            <input placeholder="作者" v-model="slug.author" />
          </div>
          </div>
        </li>
        <li class="aui-list-item">
          <div class="aui-list-item-inner">
            <div class="aui-list-item-input">
             <textarea placeholder="描述信息" v-model="slug.description"></textarea>
          </div>
          </div>
        </li>
      </ul>
    </div>
    <wysiwyg v-model="slug.body" @exec="upload" placeholder="输入详情内容..." />
    <div class="aui-padded-15 aui-text-center">
      <div
        @click="submit"
        class="aui-btn aui-btn-block aui-btn-sm aui-btn-danger"
      >
        发布
      </div>
    </div>
  </div>
</template>

<script>
// 文档：https://www.npmjs.com/package/@mmertz/vue-trix-editor
// https://vuejsexamples.com/a-lightweight-wysiwyg-html-editor-for-vue-js/
// import TrixVue from '@dymantic/vue-trix-editor'
import {actionTypes} from '@/store/modules/article'
export default {
  components: {
    // TrixVue
  },
  data() {
    return {
      slug: {},
    };
  },
  methods: {
    upload(data){
      console.log(data)
    },
    submit() {
      // console.log(this.myHTML);
      console.log(this.slug)
      this.$store.dispatch(actionTypes.createArticle,{slug:this.slug})
      .then(()=>{
        // console.log('res---',res);
        this.slug = {};
      })
    },
  },
};
</script>

<style>
</style>